<template>
    <div class="map-page-container" >
        <el-amap :center="center" :zoom="zoom" @init="init" >
            <el-amap-search-box :visible="false" @select="selectPoi" @choose="choosePoi" inputId="mapSearch" />
        </el-amap>
    </div>
    <div class="toolbar">
        <!-- <input type="text" id="mapSearch" /> -->
        <a-input v-model:value="value" id="mapSearch" placeholder="Basic usage" />
    </div>
</template>

<script  setup>
import { ref } from "vue";

const zoom = ref(15);
const value = ref("");
const center = ref([116.322056, 39.89491]);
let map = null;
const init = (e) => {
    const marker = new AMap.Marker({
        position: [116.322056, 39.89491]
    });
    e.add(marker);
    map = e;
    console.log('map init: ', map,)
}
const selectPoi = e => {
    // console.log(e)
    if (e.poi.location) {
        const marker = new AMap.Marker({
            position: [e.poi.location.lng,e.poi.location.lat]
        });
        map.add(marker);
        center.value = [e.poi.location.lng,e.poi.location.lat]
    }

}
const choosePoi = e => {
    console.log(e, 2)
}
</script>

<style>
.map-page-container {
    height: 300px;
}
</style>
